<!DOCTYPE html>
<html>
<head>
    <title>Wizmage Options</title>
    <script src='jquery.min.js'></script>
    <script src='options.js'></script>
    <style>
        body { background: #004; font-family: arial; }
        #cont { width: 525px; background: #B1F0B1; margin: auto; margin-top: 50px; padding: 20px; border-radius: 20px; }
        #list { border-radius: 10px; width: 500px; border: 2px solid #AA1212; padding: 10px; margin: 10px 0px; }
        h3 { margin-bottom: 10px; }
            h3 > * { vertical-align: middle; margin: 0; }
            h3 > label { margin-right: 10px; }
        .delete { cursor: pointer; color: red; border: 2px solid #BD17F1; padding: 0px 4px; border-radius: 12px; }
        .item:first-child { margin-top: 0; }
        .item { margin-top: 10px; }
        #addName { width: 400px; border: 1px solid green; border-radius: 5px; padding: 0px 5px; }
        .info-icon { background: black; color: white; border-radius: 10px; padding: 0 4px; cursor: default; }
    </style>
</head>
<body>
    <div id='cont'>
        <h3>
            <input type="radio" id="white-list" name="list-type" />
            <label for="white-list">White List</label>
            <input type="radio" id="black-list" name="list-type" />
            <label for="black-list">Black List</label>
            <span class="info-icon" title="With a White List, Wizmage runs on all sites, besides for those in the list below. With a Black List, Wizmage only runs on the sites in the list below.">?</span>
        </h3>
        <form>
            <input type='text' id='addName'>
            <input type='submit' value='Add Exception' id='addBut'>
        </form>
        <div><i>a URL containing any of the following lines will be matched</i></div>
        <div id='list'></div>
        <h3>Settings</h3>
        <div>
            <input type="checkbox" id="noPattern" />
            <label for="noPattern">Don't show pattern for hidden images</label>
            <span id="noPatternInfo" class="info-icon" title="Note that the pattern was carefully designed to be partly transparent, so you can see what is behind it, yet opaque enough to be able to read white text on it, which without the pattern will be completely invisible. The pattern is also useful as you can see where image-buttons are (often though, Wizmage will detect that these are buttons (or icons) and show them automatically), and  if you're buying a product, you can locate the image of the product to reveal with ALT-a.">?</span>
        </div>
        <div>
            <input type="checkbox" id="noEye" />
            <label for="noEye">Don't show the Eye in hidden images</label>
            <span id="noEyeInfo" class="info-icon" title="By default, an eye is shown when hovering the mouse over a hidden image. Clicking on it will show that image.">?</span>
        </div>
    </div>
</body>
</html>
